<template>
  <div class="register">
    <div class="formcontainer">
      <div class="headler">
        <h1>绵绵冰全栈后台管理系统</h1>
      </div>
      <div class="main">
        <el-form
          ref="registerForm"
          :model="registerUser"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="用户名" prop="name">
            <el-input
              v-model="registerUser.name"
              type="text"
              placeholder="请输入用户名"             
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              placeholder="请输入密码"
              v-model="registerUser.password"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
              type="password"
              placeholder="请输入确认密码"
              v-model="registerUser.confirmPassword"
            ></el-input>
          </el-form-item>
          <el-form-item label="注册类型" prop="identify">
            <el-select v-model="registerUser.identify" placeholder="请选择">
              <el-option label="超级管理员" value="超级管理员"></el-option>
              <el-option label="管理员" value="管理员"></el-option>
              <el-option label="员工" value="员工"></el-option>
            </el-select>
          </el-form-item>
          <!-- 注册按钮 -->
          <el-form-item>
            <!-- " -->
            <el-button type="primary" @click="submitForm(registerForm)"
              >注册</el-button
            >
            <div class="tiparea">
            <p>已经有账号？ 现在<router-link to="/login">登陆</router-link></p>
        </div>  
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { useRouter } from "vue-router"; // 导入 Vue Router 功能
const { proxy } = getCurrentInstance(); //获取当前vue实例的代理
const router = useRouter(); //获取 Vue Router 的实例

const registerForm = ref(null);
const registerUser = reactive({
  name: "",
  password: "",
  confirmPassword: "",
  identify: "",
});
// 自定义校验规则
const validatePass2 = (rule, value, callback) => { // 自定义密码验证函数
  if (value !== registerUser.password) { // 检查密码与确认密码是否匹配
    callback(new Error("两次输入密码不一致!")); // 如果不匹配，返回错误消息
  } else {
    callback(); // 如果匹配，通过验证
  }
};


// 校验规则
const rules = reactive({
  name: [
    { required: true, message: "用户名不能为空", trigger: "blur" },
    { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" },
  ],
  confirmPassword: [
    { required: true, message: "确认密码不能为空", trigger: "blur" },
    { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" },
    // 自定义了一个validatorPass2的校验规则
    {
      validator: validatePass2,
      trigger: "blur",
    },
  ],
});

// 注册事件
const submitForm = (registerForm) => {
  registerForm.value.validate((valid) => {
    if (valid) {
      proxy.$axios
        .post("/admin/register", registerUser)
        .then((res) => {
          proxy.$message({
            message: "账号注册成功",
            type: "success",
          });
          router.push("/login");
        })
        .catch((err) => {
          proxy.$message.error("注册失败");
        });
    } else {
      proxy.$message({
        type: "error",
        message: "错误提交申请",
      });
    }
  });
};
</script>

<style lang="less" scoped>
.register {
  width: 100%;
  height: 100%;
  background: url(@/assets/images/bgc.jpg);
  background-size: 100%;
  position: relative;

  .formcontainer {
    width: 370px;
    height: 250px;
    text-align: center;
    left: 35.3%;
    top: 25%;
    padding: 25px;
    position: relative;

    .headler h1 {
      font-size: large;
      text-align: center;
      font-weight: bold;
      font-size: 28px;
      margin-bottom: 20px;
    }
    .main {
        .el-button {
          width: 100%;
        }
      }
  }}

</style>
